<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav"></detail-nav-bar>
    <scroll class="content" :pullUpLoad="true">
      <detail-swiper :topImages="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shops="shops"></detail-shop-info>
    </scroll>
  </div>
</template>

<script>
import DetailNavBar from 'views/detail/DetailNavBar'
import DetailSwiper from 'views/detail/DetailSwiper'
import DetailBaseInfo from 'views/detail/DetailBaseInfo'
import DetailShopInfo from 'views/detail/DetailShopInfo'

import Scroll from 'components/common/scroll/Scroll.vue'
import {getDetailData,Goods,Shop} from 'network/detail.js'
export default {
  name:'Detail',
  components:{
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll
  },
  data(){
    return {
      iid:'',
      topImages:[],
      goods:{},
      shops:{}
    }
  },
  created(){
    this.iid=this.$route.params.id
    // 获取轮播图数据
    getDetailData(this.iid).then(res=>{
      console.log(res)
      // 顶部轮播图数据
      const data=res.data.result
      this.topImages= data.itemInfo.topImages
      //获取商品信息数据 
      this.goods=new Goods( data.itemInfo, data.columns, data.shopInfo.services)
      // 获取店铺信息
      this.shops=new Shop(data.shopInfo)
    })
  }
}

</script>
<style scoped>
#detail{
  height: 100vh;
  position: relative;
  z-index: 99;
  background: #fff;
}
.content{
  height: calc(100%-44px);
  overflow: hidden;
}
.detail-nav{
  position: relative;
  z-index: 9;
}
</style>